<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地图</title>
		
		<link rel="stylesheet" href="css/leaflet.css" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="css/mapui.css" />
		<link rel="stylesheet" href="css/layuix.css" />
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="container"></div>
	</body>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.config({
			base: 'plugin/'
		}).use(['map','mapUI','jquery','layer'], function() {
			
			var L = layui.map,
				ui = layui.mapUI,
				$ =layui.jquery;
			
			/**
			 * 目前定义的有两个模式
			 * 
			 * 一个是编辑模式一个是预览模式
			 * 编辑模式下，我们可以定义资源，并做不同图层的分组
			 * 
			 * 例如，铁资源的的分布，支持用点标注，也支持用圈圈标注
			 * 
			 * //容器id
			 * edit
			 * 会去使用mapUrl来拉取模板信息
			 * view 
			 * 会去使用url来获取某个地图的信息
			 */
			ui.render({
				mode:'view',
				container:$("#container"),
				url:'./json/mapData1.json',
				mapUrl:"./json/map.json"
			});
			// var map = L.map('map',{
			// 	minZoom:2,
			// 	maxZoom:3,
			// 	attributionControl:false,
			// 	zoomControl:false
			// }).setView([0, 0], 2);
			// var url = 'http://127.0.0.1:8848/mapbox/img/{z}/{x}-{y}.jpg';
			// // 关闭循环漫游
			// L.tileLayer(url,{
			// 	tileSize:512,
			// 	noWrap:true
			// }).addTo(map);
			// var latlngs = [
			//     [45.51, 50],
			//     [37.77, 12],
			//     [34.04, 11]
			// ];
			// L.circleMarker([50.5, 30.5], {
			// 	color: 'red',
			// 	fillColor: '#f03',
			// 	fillOpacity: 0.5,
			// 	radius: 100
			// }).addTo(map);
			// var myLines = [{
			//     "type": "LineString",
			//     "coordinates": [[20, 20], [30, 30], [40, 40]]
			// }, {
			//     "type": "LineString",
			//     "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
			// }];
			// var myStyle = {
			//     "color": "#ff7800",
			//     "weight": 5,
			//     "opacity": 0.65
			// };
			// var myLayer = L.geoJSON(myLines,{
			// 	style: myStyle
			// }).addTo(map);
			// function onMapClick(e) {
			//     alert("You clicked the map at " + e.latlng);
			// }
			
			// map.on('click', onMapClick);
			// var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
			// var bounds = [[0,0], [100,100]];
			// var image = L.imageOverlay('./img/CrystalIslesMap.jpg', bounds).addTo(map);
			// map.fitBounds(bounds);
			// var myIcon = L.icon({
			//     iconUrl: './img/CrystalIslesMap.jpg',
			//     iconSize: [38, 95],
			//     iconAnchor: [22, 94],
			//     popupAnchor: [-3, -76],
			//     shadowSize: [68, 95],
			//     shadowAnchor: [22, 94]
			// });
			// L.marker([51.5, 50]).addTo(map)
			//     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
			//     .openPopup();
			// L.circle([30, 30], {radius: 1000}).addTo(map);
			// var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
			
			// var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
			
			
			// zoom the map to the polygon
			// map.fitBounds(polygon.getBounds());
		});
		// var map = L.map('map', {
		//     crs: L.CRS.Simple,
		// 	minZoom:2,
		// 	maxZoom:5
		// });
		
	</script>
</html>
